<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>服务公司</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer companyListPage">
      <div class="table-serch-bar">
        <el-form ref="form" :inline="true" :model="form" size="medium">
          <el-form-item label="服务类型">
            <el-select placeholder="请选择" v-model="form.type" filterable>
              <el-option label="全部" value="-1"></el-option>
              <el-option label="商业保险" value="1"></el-option>
              <el-option label="社保/公积金" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="公司名称">
            <CompanySelect @sendName="getKey"></CompanySelect>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="my-table"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column width="55" align="center" type="selection"></el-table-column>
        <el-table-column min-width="90" align="center" type="index" label="编号"></el-table-column>
        <el-table-column min-width="120" align="center" prop="serviceType" label="服务类型">
          <template slot-scope="scope">
            <span>{{ scope.row.serviceType==0 ? '社保/公积金': '商保' }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="260" align="center" prop="name" label="公司名称"></el-table-column>
        <el-table-column min-width="120" align="center" prop="socialCount" label="社保账户数量"></el-table-column>
        <el-table-column min-width="120" align="center" prop="accfundCount" label="公积金账户数量"></el-table-column>
        <el-table-column min-width="120" align="center" prop="socialCustomerDealind" label="客户社保截止日">
          <template slot-scope="scope">
            <span>{{ scope.row.socialCustomerDealind ==0 ? '当月':'上月' }}{{ scope.row.socialCustomerDealindDay+'日' }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" prop="accfundCustomerDealind" label="公积金社保截止日">
          <template slot-scope="scope">
            <span>{{ scope.row.accfundCustomerDealind ==0 ? '当月':'上月' }}{{ scope.row.accfundCustomerDealindDay+'日' }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="90" align="center" prop="rincipal" label="联系人"></el-table-column>
        <el-table-column min-width="120" align="center" prop="phone" label="联系电话"></el-table-column>
        <el-table-column min-width="380" align="center" prop="addr" label="联系地址">
          <template slot-scope="scope">
            <span>
              {{ (scope.row.province==null?"":scope.row.province)
              +(scope.row.city==null?"":scope.row.city)+(scope.row.addr==null?"":scope.row.addr) }}
            </span>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="value10" label="创建人员"></el-table-column>-->
      </el-table>
      <div class="table-tools clearfix">
        <div class="fl">
          <el-button type="default" icon="iconfont iconview" size="medium" @click="viewCompany">查看</el-button>
          <el-button type="default" icon="iconfont iconadd" size="medium" @click="addCompany">添加</el-button>
          <el-button type="default" icon="iconfont iconedit" size="medium" @click="editCompany">编辑</el-button>
          <el-button type="default" icon="iconfont icondelet1" size="medium" @click="delet">删除</el-button>
        </div>
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import CompanySelect from "../../components/CompanySelect";
export default {
  name: "companyList",
  components: { CompanySelect },
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage3: 1,
      allCompany: [],
      selected: [],
      allCompanyFilterData: [],
      form: {
        type: "-1",
        key: ""
      }
    };
  },
  created() {
    this.init();
    //this.getall();
  },
  methods: {
    dataFilter(val) {
      if (val) {
        this.allCompanyFilterData = this.allCompany.filter(item => {
          if (
            pinyinUtil.getFirstLetter(item.name).indexOf(val.toUpperCase()) !=
            -1
          ) {
            return true;
          }
        });
      } else {
        this.allCompanyFilterData = this.allCompany;
      }
    },
    init: function() {
      this.getList();
    },
    getall() {
      Http.api.get("company/all").then(res => {
        this.allCompany = res.data;
        this.allCompanyFilterData = this.allCompany;
      });
    },
    getList() {
      Http.api
        .get("/company/search", {
          params: {
            key: this.form.key,
            type: this.form.type,
            page: this.currentPage3,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          this.total = res.data.total;
          this.tableData = res.data.content;
        });
    },
    handleCurrentChange(val) {
      this.getList();
    },
    onSubmit() {
      this.getList();
    },

    // 删除提示
    delet(tableData) {
      this.$confirm("确定要删除该公司吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true
      })
        .then(() => {
          let ids = new Array();
          this.selected.forEach(e => {
            ids.push(e.id);
          });
          Http.api
            .post("company/del", { ids: ids })
            .then(res => {
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.selected.forEach(e => {
                this.tableData.splice(this.tableData.indexOf(e), 1);
              });
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查看
    viewCompany() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据查看");
        return;
      } else {
        this.$router.push({
          path: "/company/view",
          query: { id: this.selected[0].id }
        });
      }
    },
    //添加
    addCompany() {
      this.$router.push({ path: "/company/add" });
    },
    //添加
    editCompany() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据查看");
        return;
      } else {
        this.$router.push({
          path: "/company/edit",
          query: { id: this.selected[0].id }
        });
      }
    },
    handleSelectionChange: function(val) {
      this.selected = val;
    },
    getKey(val) {
      this.form.key = val;
      console.log(val);
    }
  }
};
</script>

